import React, { useState, useEffect } from 'react'
import { Upload, message, Tag, Input, Button } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import MyUpLoad from '@/components/upload/UpLoad'
import { connect } from 'umi'

type Props = {
    index: number,
    dispatch: any,
    banner: Array<any>,
    url: string
}

// function getBase64(img: any, callback: any) {
//     const reader = new FileReader();
//     reader.addEventListener('load', () => callback(reader.result));
//     reader.readAsDataURL(img);
// }

// function beforeUpload(file: any) {
//     // file  当前上传文件的信息
//     // 判断文件结尾的后缀名
//     const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
//     if (!isJpgOrPng) {
//         message.error('You can only upload JPG/PNG file!');
//     }
//     // 图片要小于2MB
//     const isLt2M = file.size / 1024 / 1024 < 2;
//     if (!isLt2M) {
//         message.error('Image must smaller than 2MB!');
//     }
//     return isJpgOrPng && isLt2M;
// }

function Card({ index, dispatch, banner, url }: Props) {
    // const [loading, setLoading] = useState(false)
    // const [imageUrl, setImageUrl] = useState("")
    // // 判断是编辑还是新增
    // useEffect(() => {
    //     console.log(url)
    //     if(url) {
    //         setImageUrl(url)
    //         console.log(imageUrl)
    //     }
    // }, [])
    // function handleChange(info: any) {
    //     console.log(info.file.status)
    //     // 正在上传
    //     if (info.file.status === 'uploading') {
    //         setLoading(true);
    //         return;
    //     }
    //     // 上传完毕
    //     if (info.file.status === 'done') {
    //         // 
    //         dispatch({ type: "banner/setItemAction", index, val: info.file.response.url, action: "img" })
    //         getBase64(info.file.originFileObj, (imageUrl: any) => {
    //             setLoading(false);
    //             setImageUrl(imageUrl)
    //         }

    //         )
    //     }
    // };

    // const uploadButton = (
    //     <div>
    //         {loading ? <LoadingOutlined /> : <PlusOutlined />}
    //         <div style={{ marginTop: 8 }}>Upload</div>
    //     </div>
    // );

    function delItem() {
        dispatch({ type: "banner/delItem", index })
    }

    return (
        <div className='banner_box'>
            <div className='banner_card'>
                <Tag className='p3' color="blue">广告位 {index + 1}</Tag>

                {/* 上传图片组件 */}
                <div className='banner_flex mt15'>
                    <span className='left_text'>图片：</span>
                    {/* <Upload
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        // 上传地址
                        action="/api/upload/ad"
                        beforeUpload={beforeUpload}
                        onChange={handleChange}
                    >
                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                    </Upload> */}

                    <MyUpLoad url="/api/upload/ad"
                              isEditUrl={url}
                              index={index}
                              action="img"
                              type="banner/setItemAction"/>
                </div>
                {/* 跳转连接 */}
                <div className='banner_flex mt15'>
                    <span className='left_text w100'>跳转链接：</span>
                    <Input value={banner[index]? banner[index].url: ''}
                           onChange={(ev) => {
                                dispatch({ type: "banner/setItemAction", index, val: ev.target.value, action: "url" })
                           } } />
                </div>
                <div className='banner_flex mt15'>
                    <Button type="primary"
                        onClick={() => {
                            delItem()
                        }}
                        danger>删除</Button>
                </div>
            </div>
        </div>
    )
}

const mapStateToProps = (state: any) => {
    const { banner } = state
    return {
        banner
    }
}

export default connect(mapStateToProps)(Card)